<template>
	<view>
		<view v-if="!li" >
		<view v-if="top" class="cu-form-group margin-top">
			<view class="title">消息设置</view>
			<button type="default" class="cu-btn round" @click="readall">全部设为已读</button>
		</view>
		<view class="cu-card dynamic" v-for="item in list" :key="item._id">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar  flex align-center justify-between">
					<view class="flex align-center padding">
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
						<image :src="item.avatar" class="cu-avatar round l"></image>
						<view class="content flex-sub">
							<view class="margin-left-sm">{{item.name}}</view>
						</view>
					</view>
					<view class="padding" @click="toggleMask(item.name,item.content,item._id)">回复</view>
				</view>

				<view class="text-content">
					评论你：{{item.content}}
				</view>
				<list-card-jb :t_id="item.t_id"></list-card-jb>
				<view class="text-gray text-sm text-right padding">
					<view class="text-gray text-sm flex justify-between">
						{{item.time | unix2Time}}
					</view>
				</view>

			</view>
		</view>
		<ygc-comment ref="ygcComments" :placeholder="placeholder" @pubComment="pubComment()"></ygc-comment>
		
		</view>
		<view v-else>
		<image  src="../../static/img/空.png" style="margin:20% 10%; "></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				id: "",
				placeholder: "", //默认值
				userinfo: "",
				li:false,
				top:false,
			}
		},
		onLoad() {
			uni.showLoading()
			let userinfo = uni.getStorageSync('userPhone') || uni.getStorageSync('userWx')
			this.userinfo = userinfo
			this.init()
		},
		methods: {
			toggleMask(name, content, id) {
				console.log(name, content, id);
				this.id = id;
				this.placeholder = `回复${name}:`
				this.$refs.ygcComments.toggleMask('show');
			},
			onPullDownRefresh() {
				this.init()
			},
			async init() {
				await this.$store.dispatch('initmsgnum',this.userinfo.id)
				this.list = this.$store.state.msg
				this.list.length ? this.li = false : this.li =true,
				this.list.length? this.top=true :this.top=false
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			pubComment(content) {
				console.log(this.id);
				uni.showLoading({
					title: "回复中"
				})
				uniCloud.callFunction({
					name: "get_message",
					data: {
						type: "re_msg",
						id: this.id,
						content,
						atr: this.userinfo.atr
					}
				}).then(res => {
					let index = this.list.findIndex(item => item.id = this.id)
					this.list.splice(index, 1)
					uni.showToast({
						title: "回复成功"
					})
				}).catch(err => console.log(err))
				this.$refs.ygcComments.toggleMask();
			},
			readall() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定全部设为已读',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading()
							uniCloud.callFunction({
								name: "get_message",
								data: {
									type: "readall",
									id: that.userinfo.id
								}
							}).then(res => {
								that.list = []
								uni.showToast({
									title: "成功"
								})
							}).catch(err => console.log(err))
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>

</style>
